<template>
    <div class="page-container">
        <div class="items">
            <div class="item" v-for="item in items" :key="item.name">
                <div class="icon-container" @click="onItemClick(item)" :style="{ backgroundColor: item.color }">
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="`#icon-${item.icon}`"></use>
                    </svg>
                </div>
                <div class="text">{{ item.name }}</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const items = ref([
    { name: '订单', icon: 'dingdan', color: 'var(--el-color-primary)', path: '/order' },
    { name: '用户', icon: 'yonghu', color: 'var(--el-color-success)', path: '/user' },
    { name: '统计', icon: 'tongji', color: 'var(--el-color-warning)', path: '/tongji' },
    { name: '用量', icon: 'shuju', color: 'var(--el-color-danger)', path: '/use' },
    { name: 'AI', icon: 'ai', color: '#9c27b0' },
    { name: '语言', icon: 'lujing-19', color: '#673ab7', path: '/language' },
    { name: '菜单', icon: 'caidan', color: '#3f51b5', path: '/menu' },
    { name: '反馈', icon: 'fankuixinxi', color: '#00bcd4', path: '/feedback' },
])
const onItemClick = (item) => {
    if (item.path) {
        router.push(item.path)
    }
}
</script>
<style lang="scss" scoped>
.items {
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 40px;
}

.item {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.icon-container {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px; // 新增圆角效果
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;

    &:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
}

.icon {
    color: #FFF;
    width: 40px;
}

.text {
    color: #4a4a4a;
    font-size: 14px;
    transition: color 0.2s ease;

    &:hover {
        color: var(--el-color-primary);
    }
}
</style>